<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://chances.com.cn/jsp/epgdata" prefix="epgdata" %>
<%@taglib uri="http://chances.com.cn/jsp/epgutils" prefix="epgutils" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<epgdata:bizList var="newHot_biz" code="${_templateParams['newHot_biz']}" />
<epgdata:bizList var="type_biz" code="${_templateParams['type_biz']}" />
<epgdata:bizList var="addr_biz" code="${_templateParams['addr_biz']}" />
<epgdata:bizList var="year_biz" code="${_templateParams['year_biz']}" />

<c:set var="yearlen" value="${fn:length(year_biz)-1}"/>
<c:set var="amount" value="0"/>
<c:set var="display_newHot" value="none"/>
<c:if test="${not empty _templateParams['newHot_biz']}">
	<c:set var="amount" value="${amount + 1}"/>
	<c:set var="display_newHot" value="block"/>
</c:if>
<c:set var="display_type" value="none"/>
<c:if test="${not empty _templateParams['type_biz']}">
	<c:set var="amount" value="${amount + 1}"/>
	<c:set var="display_type" value="block"/>
</c:if>
<c:set var="display_addr" value="none"/>
<c:if test="${not empty _templateParams['addr_biz']}">
	<c:set var="amount" value="${amount + 1}"/>
	<c:set var="display_addr" value="block"/>
</c:if>
<c:set var="display_year" value="none"/>
<c:if test="${not empty _templateParams['year_biz']}">
	<c:set var="amount" value="${amount + 1}"/>
	<c:set var="display_year" value="block"/>
</c:if>

<c:set var="type" value="${_templateParams['type_str']}"/>
<c:if test="${empty type}">
	<c:set var="type" value="${_context.biz.title}"/>
</c:if>

<!-- 标题 -->
	<div class="row menu-row navbar-fixed-top">
		<div class="col-xs-2 menu-col" onclick="onBackEvent();">
			<img src="${_templatePath}/images/back.png" class="menu-col-back" />
		</div>
		<div class="col-xs-8 menu-col">${_context.biz.title}</div>
		<div class="col-xs-2 menu-col-image" id="vod_list_search"
			onclick="gotoLink('${searchUrl}','vod_list_search')">
			<img src="${_templatePath}/images/menu_sch.png" class="menu-col-img" />
		</div>
	</div>
	
<!-- 筛选条件 -->
	<style>
		.fixed-filter-type{
			font-size:1em;height:3em;margin-left:0.7em;width:5em;line-height: 2.5em;
		}
	</style>
	<div class="row row-empty navbar-fixed-top" 
		style="z-index:9999;margin-top:4em;width:5em;">
		<div class="row row-empty fixed-filter-type"
			style="display:${display_newHot};">
			<div class="inner-list">${newHot_biz[0].title}</div>
		</div>
		<div class="row row-empty fixed-filter-type"
			style="display:${display_type};">
			<div class="inner-list">${type_biz[0].title}</div>
		</div>
		<div class="row row-empty fixed-filter-type"
			style="display:${display_addr}">
			<div class="inner-list">${addr_biz[0].title}</div>
		</div>
		<div class="row row-empty fixed-filter-type"
			style="display:${display_year}">
			<div class="inner-list">${year_biz[0].title}</div>
		</div>
	</div>
	
	<div class="container navbar-fixed-top shaixuan" style="margin-top: 4em;padding-left: 4.5em;">
		<div id="scroll_newHot_swiper" style="display:${display_newHot};" class="swiper-container">
			<div id="scroll_newHot" class="swiper-wrapper swiper-wrapper-list">
				<c:forEach items="${newHot_biz}" var="item" varStatus="i" begin="1">
					<div class="swiper-slide">
						<div onclick="chooseOption('newHot','newHot_${i.index-1}','${i.index}')"
							class="inner-list" id="newHot_${i.index-1}">${item.title}</div>
					</div>
				</c:forEach>
			</div>
		</div>
		
		<div id="scroll_type_swiper" style="display:${display_type};" class="swiper-container">
			<div id="scroll_type" class="swiper-wrapper swiper-wrapper-list">
				<c:forEach items="${type_biz}" var="item" varStatus="i" begin="1">
					<div class="swiper-slide">
						<div onclick="chooseOption('type','type_${i.index-1}','${item.title}')"
							class="inner-list" id="type_${i.index-1}">${item.title}</div>
					</div>
				</c:forEach>
			</div>
		</div>

		<div id="scroll_addr_swiper" style="display:${display_addr}" class="swiper-container">
			<div id="scroll_addr" class="swiper-wrapper swiper-wrapper-list">
				<c:forEach items="${addr_biz}" var="item" varStatus="i" begin="1">
					<div class="swiper-slide">
						<div onclick="chooseOption('addr','addr_${i.index-1}','${item.title}')"
							class="inner-list" id="addr_${i.index-1}">${item.title}</div>
					</div>
				</c:forEach>
			</div>
		</div>
		
		<div style="padding-left:2em;">
		<div id="scroll_year_swiper" style="display:${display_year}" class="swiper-container">
			<div id="scroll_year" class="swiper-wrapper swiper-wrapper-list">
				<c:forEach items="${year_biz}" var="item" varStatus="i" begin="1">
					<div class="swiper-slide">
						<div onclick="chooseOption('year','year_${i.index-1}','${item.title}')"
							class="inner-list" id="year_${i.index-1}">${item.title}</div>
					</div>
				</c:forEach>
			</div>
		</div>
		</div>
	</div>
	<div class="row index-line-list navbar-fixed-top" style="margin-top:${16-(4-amount)*3}em;"></div>
	
	<script>
	$(document).ready(
		function() {
			var names = [ "#scroll_newHot_swiper",
					"#scroll_type_swiper", 
					"#scroll_addr_swiper",
					"#scroll_year_swiper"];
			$.each(names, function(i, val) {
				var swiper1 = new Swiper(val, {
					slidesPerView : 'auto',
				//spaceBetween: 10
				});
			});
	});
	var opName = "${_context.bizCode}"+"Option";
	var options = new optionStorage(opName);
	options.init();
	var type="${type}";
	var yearlen = parseInt("${yearlen}")-1;
	</script>